網頁應用開發中的根本瓶頸在於 同步執行 I/O 操作。當腳本執行同步請求時，會將瀏覽器的主要執行緒與網路固有的延遲綁定，造成「停頓世界」的情況。
1. 阻塞問題
同步請求（使用 false 旗標於 XMLHttpRequest.open）會佔用瀏覽器的執行緒。這會阻止所有使用者互動、動畫和渲染，直到伺服器回應為止。對使用者而言，分頁看起來像是凍結了。
2. 程式邏輯的轉變
從「超越凍結」轉型，需要從線性模型轉向 非同步風格。雖然同步程式設計遵循嚴格的自上而下順序，但非同步性則依賴於 事件處理器 來偵測資料到達的時機，讓腳本能立即繼續執行。
3. 螢幕介面回應力的必須要求
現代專案的需求要求在不凍結文件介面的情況下處理檔案讀取或資料擷取。這確保即使在複雜的遠端操作期間，游標仍可正常運作，按鈕也保持可點擊狀態。
main.py
TERMINALbash — 80x24
> Ready. Click "Run" to execute.
>
QUESTION 1
What does setting the third argument of
XMLHttpRequest.open to false do?It enables asynchronous mode.
It makes the request synchronous, blocking the main thread.
It automatically parses the response as JSON.
It cancels the request if it takes too long.
✅ Correct!
The 'false' flag triggers a synchronous request, which stops everything else until the response returns.❌ Incorrect
In XHR, 'false' explicitly disables the asynchronous behavior.QUESTION 2
In an asynchronous model, how does the program know a response has arrived?
The script stops and waits for the next line to run.
It uses an event handler to 'notice' the response.
It periodically checks the memory address of the request.
The browser reloads the entire page.
✅ Correct!
Asynchronous programming is event-driven; you define a function to run once the data is ready.❌ Incorrect
Stopping to wait is the definition of synchronous programming, not asynchronous.QUESTION 3
Why is the synchronous 'Anti-Pattern' discouraged in modern web apps?
It makes the code too short.
It uses too much server memory.
It freezes the UI, creating a poor user experience.
It only works with text files.
✅ Correct!
UI responsiveness is a mandate; users should not have their interactions blocked by network latency.❌ Incorrect
The primary issue with synchronous I/O is user interface locking, not server-side resources.QUESTION 4
Which requirement is central to 'Persistent Applications' mentioned in this lesson?
Running code without any network access.
Handling background tasks without freezing the document UI.
Using only XML for all data storage.
Disabling the user's cursor during fetches.
✅ Correct!
Modern persistent apps must maintain a responsive interface while syncing data in the background.❌ Incorrect
Persistent apps often rely heavily on background networking.QUESTION 5
What is the result of
req.send(null) in synchronous mode?It returns immediately with a promise.
It blocks execution until the response is fully received.
It runs the request in a separate web worker.
It throws an error if the server is slow.
✅ Correct!
In synchronous mode, send() does not return until the server transaction is finished.❌ Incorrect
In sync mode, the function call is a blocking operation.Case Study: The Zip Code Validator
Network Latency and UI State
You are developing a complex data-entry form. When a user types a ZIP code, the application must validate it against a remote database. In your initial test, you used a synchronous XMLHttpRequest to fetch the city name.
Q
Describe what happens to the user interface (e.g., the cursor and buttons) while the synchronous request is waiting for a 2-second server response.
Solution:
The entire browser tab locks up. The cursor stops blinking, buttons become unclickable, and the user cannot scroll or interact with other form fields because the main execution thread is occupied waiting for the request to return.
The entire browser tab locks up. The cursor stops blinking, buttons become unclickable, and the user cannot scroll or interact with other form fields because the main execution thread is occupied waiting for the request to return.
Q
How would the 'Asynchronous style of programming' change this behavior?
Solution:
The request would be dispatched in the background. The user could continue filling out their phone number or email while the ZIP code validation happens silently. Once the server responds, an event handler would trigger to update the city field without ever interrupting the user's flow.
The request would be dispatched in the background. The user could continue filling out their phone number or email while the ZIP code validation happens silently. Once the server responds, an event handler would trigger to update the city field without ever interrupting the user's flow.